<template>
  <div class="identity margin-bottom20">
    <a-input v-model:value="search" placeholder="搜索" />
  </div>
  <div class="Table-container">
    <a-table
      rowKey="key"
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :expandedRowKeys="expandedRowKeys"
      @expand="handleExpand">
      <template #bodyCell={column,record}>
        <span v-if="column.key==='name'">
          <!-- 搜索字体高亮 -->
          <span v-html="hightLightText(record.name, 'red','aquamarine')"></span>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'

const nameRef = ref()
const expandedRowKeys = ref([])

// 存放 tree 扁平化后数组
const dataArrs = []
onMounted(() => {
  const recursion = (data, parent) => {
    data.forEach((item) => {
      let { key, children } = item
      let pid = parent ? parent.key : 0

      // 生成节点 patch
      let patch = []
      if (pid === 0) {
        patch = [0]
      } else {
        patch = [...parent.patch, pid]
      }

      // 插入 dataArrs
      dataArrs.push({
        ...item,
        pid,
        patch
      })

      // children 递归
      if (children) {
        recursion(children, { ...item, patch })
      }
    })
  }

  recursion(data)

  console.log(dataArrs)
})

// search 搜索数据
const search = ref('')
watch(search, () => {
  let value = search.value

  // 为空判断
  if (value === '') {
    expandedRowKeys.value = []
    return
  }

  // 1：筛选符合查询条件的数据
  let filterArrs = dataArrs.filter((i) => i.name.indexOf(value) > -1)
  // 2：过滤获取 patch 数组
  filterArrs = filterArrs.map((i) => i.patch)
  // 3：转一维数组
  filterArrs = filterArrs.reduce((pre, curr) => {
    return pre.concat(curr)
  }, [])
  // 4：去重
  filterArrs = Array.from(new Set(filterArrs))
  // 5：设置展开行
  expandedRowKeys.value = filterArrs
})

// columns 表格字段
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address'
  }
]

// data 表格数据
const data = reactive([
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park'
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park'
          }
        ]
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park'
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
])

/**
 * 表格 expand 方法
 * @param {*} expanded
 * @param {*} record
 */
const handleExpand = (expanded, record) => {
  console.log(expanded, record)
  let { key } = record
  let keys = expandedRowKeys.value
  if (expanded) {
    keys = [...keys, key]
  } else {
    keys = keys.filter((item) => item !== key)
  }

  expandedRowKeys.value = keys
}


/**
 * 区分大小写的关键字高亮方法
 * @param {String} text - 需要高亮的文字
 * @param {String} color - 需要高亮成什么颜色
 * @returns {String} 返回html字符串
 */
const hightLightText = (text, color='pink',background='white') => {
  let value = search.value
  let replaceReg = new RegExp(value, 'g')
  // $& 正则占位符
  const res = text.replace(replaceReg, `<span style="color: ${color};background: ${background};">$&</span>`)
  return res
}
</script>

<style scoped></style>
